<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WASM Calculator Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .calculator {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .test-cases {
            margin: 20px 0;
        }

        .test-case {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 3px;
        }

        input[type="number"] {
            width: 100px;
            padding: 5px;
        }

        button {
            padding: 5px 15px;
            margin: 0 5px;
            cursor: pointer;
        }

        .result {
            margin-left: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>WASM Calculator Test</h1>
<<<<<<< HEAD
    
=======

>>>>>>> feat:新增C# WASM
    <div class="calculator">
        <h2>计算器</h2>
        <input type="number" id="num1" value="5.5" step="0.1" />
        <span>+</span>
        <input type="number" id="num2" value="3.3" step="0.1" />
        <button id="calcButton">计算</button>
        <span>结果：</span>
        <span id="result" class="result"></span>
    </div>

    <div class="test-cases">
        <h2>测试用例</h2>
        <div class="test-case">
            <button onclick="runTest(1.1, 2.2)">测试 1: 1.1 + 2.2</button>
            <span class="result"></span>
        </div>
        <div class="test-case">
            <button onclick="runTest(-3.5, 2.5)">测试 2: -3.5 + 2.5</button>
            <span class="result"></span>
        </div>
        <div class="test-case">
            <button onclick="runTest(0.1, 0.2)">测试 3: 0.1 + 0.2</button>
            <span class="result"></span>
        </div>
        <div class="test-case">
            <button onclick="runTest(99999.9, 0.1)">测试 4: 99999.9 + 0.1</button>
            <span class="result"></span>
        </div>
    </div>

<<<<<<< HEAD
    <script type="module">
        let exports;
        window.runTest = null;
        
=======
    <div id="TestDiv" style="width:100px;height:100px;background:black;">

    </div>
    <button id="testButton">测试</button>
    <script type="module">
        let exports;
        window.runTest = null;

>>>>>>> feat:新增C# WASM
        async function initWasm() {
            try {
                const { dotnet } = await import('../AppBundle/_framework/dotnet.js');

                // 配置运行时
                const runtime = await dotnet
                    .withConfig({
                        mainAssemblyName: 'ConsoleApp1',
                        configSrc: '../AppBundle/_framework/blazor.boot.json'
                    })
                    .withModuleConfig({
                        disableInterop: false,
                        enableTimezone: false
                    })
                    .create();

                // 获取导出的方法
                exports = await runtime.getAssemblyExports('ConsoleApp1');

                if (exports) {
                    console.log("WASM 模块加载成功");
                    // 设置全局测试函数
                    window.runTest = async (a, b) => {
                        try {
                            const result = await exports.ConsoleApp1.Calculator.Add(a, b);
                            console.log(`测试 ${a} + ${b} = ${result}`);
                            // 找到对应的测试用例结果span
                            const button = document.querySelector(`button[onclick="runTest(${a}, ${b})"]`);
                            const resultSpan = button.parentElement.querySelector('.result');
                            resultSpan.textContent = ` = ${result}`;
                            return result;
                        } catch (error) {
                            console.error('测试错误:', error);
                            return null;
                        }
                    };
                }

                // 添加计算按钮事件监听
                document.getElementById('calcButton').addEventListener('click', calculateSum);
<<<<<<< HEAD
=======
                document.getElementById('testButton').addEventListener('click', SetRedBackground);
>>>>>>> feat:新增C# WASM
            } catch (error) {
                console.error("加载 WASM 模块失败:", error);
            }
        }

<<<<<<< HEAD
=======
        async function SetRedBackground() {
            if (!exports) {
                console.error("WASM 模块未加载");
                return;
            }

            const testDiv = document.getElementById('TestDiv');

            try {
                await exports.ConsoleApp1.Calculator.SetRedBackground(testDiv);
            } catch (error) {
                console.error('设置失败:', error);
            }
        }

>>>>>>> feat:新增C# WASM
        async function calculateSum() {
            if (!exports) {
                console.error("WASM 模块未加载");
                return;
            }

            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
<<<<<<< HEAD
            
=======

>>>>>>> feat:新增C# WASM
            try {
                const result = await exports.ConsoleApp1.Calculator.Add(num1, num2);
                console.log('计算结果:', result);
                document.getElementById('result').textContent = result;
            } catch (error) {
                console.error('计算错误:', error);
                document.getElementById('result').textContent = '错误';
            }
        }
<<<<<<< HEAD

=======
>>>>>>> feat:新增C# WASM
        // 初始化 WASM
        initWasm();
    </script>
</body>
</html>